<template>
  <h1 class="title">复审记录详情</h1>
  <el-descriptions
    style="
      border-radius: 10px;
      margin: 20px auto;
      width: 73%;
      box-shadow: 5px 5px 10px rgba(98, 106, 239, 0.5);
    "
    :column="3"
    size="large"
    border
  >
  <el-descriptions-item label-class-name="my-label" class-name="my-content">
    <template #label>
      <div class="cell-item">
        <el-icon :style="iconStyle">
          <iphone />
        </el-icon>
        所属部门
      </div>
    </template>
    {{ route.query.deptName }}
  </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          岗位名称
        </div>
      </template>
      {{ route.query.position }}
    </el-descriptions-item>
    
	<el-descriptions-item label-class-name="my-label" class-name="my-content">
	  <template #label>
	    <div class="cell-item">
	      <el-icon :style="iconStyle">
	        <iphone />
	      </el-icon>
	      员工姓名
	    </div>
	  </template>
	  {{ route.query.empName }}
	</el-descriptions-item>
  </el-descriptions>

 <el-card style="padding: 10px" class="card">
   <template #header>
     <div class="card-header">
       <span>评分项目</span>
       <el-icon><Connection /></el-icon>
     </div>
   </template>
   <ScoreForm
     :scoreList="scoreList"
     v-if="WaitStateList.scoreState == 1"
   ></ScoreForm>
 </el-card>
 <el-card style="padding: 10px">
   <template #header>
     <div class="card-header">
       <span>计件项目</span>
       <el-icon><MessageBox /></el-icon>
     </div>
   </template>
   <PieceForm
     :pieceList="pieceList"
     v-if="WaitStateList.pieceState == 1"
   ></PieceForm>
 </el-card>
 <el-card style="padding: 10px">
   <template #header>
     <div class="card-header">
       <span>提成项目</span>
       <el-icon><DataLine /></el-icon>
     </div>
   </template>
   <KpiForm :kpiList="kpiList" v-if="WaitStateList.kpiState == 1"></KpiForm>
 </el-card>
 <el-card style="padding: 10px">
   <template #header>
     <div class="card-header">
       <span>Okr项目</span>
       <el-icon><Finished /></el-icon>
     </div>
   </template>
   <OkrForm :okrList="okrList" v-if="WaitStateList.okrState == 1"></OkrForm>
 </el-card>
 
 <!-- <el-card style="padding: 10px" class="card">
    <template #header>
      <div class="card-header">
        <span>我的特殊绩效</span>
        <el-icon><Connection/></el-icon>
      </div>
    </template>
    <RewardForm
      :rewardList="rewardList"
      v-if="WaitStateList.rewardState == 1"
    ></RewardForm>
  </el-card>
  
  
  <el-card style="padding: 10px" class="card">
     <template #header>
       <div class="card-header">
         <span>我的兼职绩效</span>
         <el-icon><Connection/></el-icon>
       </div>
     </template>
     <PartTimeRewardForm
       :partTimeRewardList="partTimeRewardList"
       v-if="WaitStateList.partTimeRewardState == 1"
     ></PartTimeRewardForm>
   </el-card> -->
</template>

<script  setup>
import { ref, onBeforeMount, reactive, getCurrentInstance, watch } from "vue";
import { useRoute } from "vue-router";
import { Timer } from "@element-plus/icons-vue";
import { Calendar } from "@element-plus/icons-vue";
import ScoreForm from "./scoreFormApproval";
import PieceForm from "./pieceForm";
import KpiForm from "./kpiForm";
import OkrForm from "./okrForm";
import RewardForm from "./rewardForm";
import PartTimeRewardForm from "./partTimeRewardForm";
import { getThirdDetail, state ,getMyWage } from "@/api/person";
import { ElMessage, ElMessageBox } from "element-plus";


const now = new Date();
const year = now.getFullYear();
// 获取当前月份（注意：月份从0开始，所以需要加1）
const month = now.getMonth()+1;
// 格式化为 YYYY-MM 形式
const yearMonth = `${year}-${month < 10 ? '0' : ''}${month}`;

var value2 = ref(yearMonth);

const route = useRoute();
const deptName = ref();
const position = ref();

const PageForm = ref({
  page: 1,
  total: null,
});

const WaitStateList = ref([]);
const scoreList = ref([]);
const pieceList = ref([]);
const kpiList = ref([]);
const okrList = ref([]);
const rewardList = ref([]);
const partTimeRewardList = ref([]);
const assessorPage = ref([]);
onBeforeMount(() => {
  view()
});



const view = () => {
  let stateUserId = route.query.empId;
  let positionId = route.query.positionId;
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
  var time = value2.value;
  getThirdDetail({ stateUserId,assessorId,time,positionId }).then((data) => {
    assessorPage.value = data.data.records;
	WaitStateList.value = data.data.records[0].state[0];
  	partTimeRewardList.value = data.data.records[0].partTimeReward;
  	rewardList.value = data.data.records[0].reward;
    scoreList.value = data.data.records[0].score;
    pieceList.value = data.data.records[0].piece;
    kpiList.value = data.data.records[0].kpi;
    okrList.value = data.data.records[0].okr;
    deptName.value =
      data.data.records[0].deptName;
    position.value =
      data.data.records[0].position;
  });
};

</script>
<style lang="scss" scoped>
.el-card {
  border-radius: 10px;
  margin: 20px auto;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.button {
  margin-left: 205px;
  float: left;
}

.header-tab:deep(.el-tabs__content) {
  flex-grow: 1;
  overflow-y: scroll;
}
.fixed-tabs {
  position: sticky;
  top: 0; /* 选项卡固定在顶部 */
  z-index: 1000; /* 确保选项卡在内容之上 */
}

:deep(.my-label) {
  background: rgba(98, 106, 239, 0.15) !important;
  color: #626aef !important;
  border: #626aef 2px solid !important ;
}
:deep(.my-content) {
  color: #fff !important;
  background: rgba(98, 106, 239, 0.9) !important;
  border: #626aef 2px solid !important ;
}
.title {
  font-size: 1.5625rem;
  letter-spacing: 0.1875rem;
  padding: 0 0 1rem;
  margin-bottom: 16px;
  text-align: center;
  color: #626aef;
}
.el-card {
  width: 90%;
}

.el-card ::v-deep .el-card__header {
  border: none;
  height: 20px;
  color: #95d475;
  font-size: 20px;
}

.pagination {
  margin: 20px 50px;
  display: flex;
  justify-content: end;
}
</style>
